<template>
  <div class="box">
    <!-- <div class="top" v-show="!shows"> -->
      <div class="top">
      <scroller :on-refresh="refresh" ref="more" :on-infinite="infinite" style="padding-top: 44px;" :noDataText="noDataText" >
        <div @click="handerClick(item)" v-for="(item, index) in more" class="row" :key="index" :class="{'grey-bg': index % 2 == 0}">
          <!-- {{ item }} -->
          <b>{{item.name}}</b>
          <span>{{item.store}}</span>
        </div>
      </scroller>
    </div>
    <!-- <div v-show="shows">
      <router-view></router-view>
    </div> -->
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      // arr: [],
      noDataText: "--我也是有底线的--",
      numP:10,
      count:0,
      more:[],
      currentPage:1,
      shows:false
    };
  },
  computed: {
    ...mapState({
      lists: state => state.lists,
      total: state => state.total,
        // arr :state => state.arr
    })
  },
  mounted() {
    console.log(1)
    this.getListData(1).then( res =>{
      this.more = this.lists
    })
    ;
  },
  methods: {
    ...mapActions(["getListData"]),
    ...mapMutations(["setArr",'getListsF']),
    infinite: function(done) {
      this.timeout = setTimeout(() => {
        if (this.more.length >=this.total) {
                done&&done(true)
          this.$refs.more.finishInfinite(true);
        } else {
          this.$refs.more.finishInfinite(false);
           this.currentPage+=1
            this.getListData(this.currentPage).then( res=>{
                this.more=this.more.concat(this.lists)
            })
            done()
        }
         
      }, 1500);
    },
    refresh: function() {
      console.log("refresh");
      this.timeout = setTimeout(() => {
        this.getListData(1);
        this.$refs.more.finishPullToRefresh();
      }, 1500);
    },
    handerClick(item){
      // this.shows = !this.shows
      this.$router.push({name: "detail",params:item});
    },
    getList() {
      this.getListData(1);
    }
  },
  beforeRouteEnter (to, from, next) {
    // console.log(sessionStorage.askPosition)
    if(!sessionStorage.askPositon || from.path=='/'){
        sessionStorage.askPositon = ''
        next()
    }else{
      next( vm =>{
        if(vm && vm.$refs.more){
          setTimeout(function(){
            vm.$refs.more.scrollTo(0,sessionStorage.askPositon,false)
          },20)//同步转异步操作
        }
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.askPositon = this.$refs.more && this.$refs.more.getPosition() && this.$refs.more.getPosition().top;
    console.log(top)
    next()
  }

};
</script>

<style scoped>
.box {
  background: red;
}
.title {
  text-indent: 20px;
  margin-bottom: 10px;
  border-bottom: 2px solid #ccc;
  /* height: 40px;
  line-height: 40px; */
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 70px;
  overflow: hidden;
}
.row {
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  color: #000;
  /* margin-left: 20px; */
  margin-bottom: 10px;
  background: blue;
  text-indent: 20px;
}
p {
  margin: 0;
  padding: 0;
}
</style>